 <template>
  <div>
    <div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
        v-model="arr1"
        :options="arr2"
        @change="handleChange"
      ></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        v-model="arr1"
        :options="arr2"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      arr1: [],
      arr2: [
        {
          value: "zhangsan",
          label: "张三",
          children: [
            {
              value: "lisi",
              label: "李四",
              children: [
                {
                  value: "lisi0",
                  label: "李四0",
                },
                {
                  value: "lisi1",
                  label: "李四1",
                },
                {
                  value: "lisi2",
                  label: "李四2",
                },
                {
                  value: "lisi3",
                  label: "李四3",
                },
              ],
            },
            {
              value: "wangwu",
              label: "王五",
              children: [
                {
                  value: "wanwu0",
                  label: "王五0",
                },
                {
                  value: "wangwu1",
                  label: "王五1",
                },
                {
                  value: "wangwu2",
                  label: "王五2",
                },
              ],
            },
            {
              value: "liusi",
              label: "刘四",
              children: [
                {
                  value: "liusi0",
                  label: "刘四0",
                },
                {
                  value: "liusi1",
                  label: "刘四1",
                },
                {
                  value: "liusi2",
                  label: "刘四2",
                },
              ],
            },
          ],
        },
        {
          value: "zhangsan",
          label: "牛二",
          children: [
            {
              value: "peiping",
              label: "佩平",
              children: [
                {
                  value: "peiping0",
                  label: "佩平0",
                },
                {
                  value: "peiping1",
                  label: "佩平1",
                },
                {
                  value: "peiping2",
                  label: "佩平2",
                },
                {
                  value: "peiping3",
                  label: "佩平3",
                },
              ],
            },
            {
              value: "gousheng",
              label: "狗剩",
              children: [
                {
                  value: "gousheng1",
                  label: "狗剩1",
                },
                {
                  value: "gousheng2",
                  label: "狗剩2",
                },
                {
                  value: "gousheng3",
                  label: "狗剩3",
                },
              ],
            },
            {
              value: "wukong",
              label: "悟空",
              children: [
                {
                  value: "wukong1",
                  label: "悟空1",
                },
                {
                  value: "wukong2",
                  label: "悟空2",
                },
                {
                  value: "wukong3",
                  label: "悟空3",
                },
              ],
            },
          ],
        },
        {
          value: "xiaoming",
          label: "小明",
          children: [
            {
              value: "xiaowang",
              label: "小王",
              children: [
                {
                  value: "wanwu0",
                  label: "小王0",
                },
                {
                  value: "wangwu1",
                  label: "小王1",
                },
                {
                  value: "wangwu2",
                  label: "小王2",
                },
                {
                  value: "wangwu3",
                  label: "小王3",
                },
              ],
            },
            {
              value: "xiaomei",
              label: "小美",
              children: [
                {
                  value: "wanwu1",
                  label: "小美1",
                },
                {
                  value: "wangwu2",
                  label: "小美2",
                },
                {
                  value: "wangwu3",
                  label: "小美3",
                },
              ],
            },
            {
              value: "xiaoli",
              label: "小丽",
              children: [
                {
                  value: "wanwu1",
                  label: "小丽1",
                },
                {
                  value: "wangwu2",
                  label: "小丽2",
                },
                {
                  value: "wangwu3",
                  label: "小丽3",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(this.options);
    },
  },
  computed: {},
};
</script>
 <style lang='css'>
</style>